<template>
  <div class="app-container">

    <el-form v-show="showSearch" :rules="rules" ref="ruleForm" :model="queryParams" size="small" :inline="true"
      label-width="90px">
      <el-form-item label="客户姓名：" prop="clientName">
        <el-input v-model.trim="queryParams.clientName" placeholder="客户姓名" clearable style="width: 300px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="手机号码：" prop="phone">
        <el-input v-model.trim="queryParams.phone" placeholder="客户手机号码" clearable style="width: 300px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="身份证号：" prop="citizenIdentity">
        <el-input v-model.trim="queryParams.citizenIdentity" placeholder="客户身份证号" clearable style="width: 300px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="渠道名称：" prop="channelName">

        <el-select v-model="queryParams.channelName" placeholder="全部" clearable style="width: 240px">
          <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="产品名称" prop="productionName">
        <el-select v-model="queryParams.productionName" placeholder="请选择" clearable style="width: 240px"
          @visible-change="selectProduction($event)">
          <el-option v-for="item in productionOptions" :value="item"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['system:post:add']" type="primary" plain size="max" @click="jump('ruleForm')">
          保存并配置下一步</el-button>
      </el-col>

    </el-row>


  </div>
</template>

<script>
// 导入api
import { addNewFeedS1, findChannel, findProduction } from '@/api/applicat'
import { typeOf } from 'micromatch/lib/utils';
import { type } from 'os';
export default {
  // 字典导入
  dicts: ['order_status', 'source_status'],
  data() {

    //验证方法
    let validatorPhone = function (phone, value, callback) {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else if (!(/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/).test(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    let validatorCtId = function (ctId, value, callback) {
      if (value === '') {
        callback(new Error('身份证号不能为空'))
      } else if (!/(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/.test(value)) {
        callback(new Error('身份证号格式错误'))
      } else {
        callback()
      }
    }

    return {
      handle: undefined,
      channelOptions: [],
      productionOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      feedList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],

      // 查询参数
      queryParams: {
        clientName: undefined,
        citizenIdentity: undefined,
        phone: undefined,
        channelName: undefined,
        clientId: undefined,
        productionName: undefined,
      },
      // 表单参数
      form: {},
      ruleForm: {
        clientName: '',
        citizenIdentity: '',
        phone: '',
        channelName: '',
        productionName: ''
      },
      rules: {
        clientName: [
          { required: true, message: "客户姓名不能为空", trigger: "blur" }
        ],
        citizenIdentity: [
          { required: true, validator: validatorCtId, trigger: "blur" }
        ],
        phone: [
          { required: true, validator: validatorPhone, trigger: "blur" }
        ],
        channelName: [
          { required: true, message: "请选择渠道", trigger: "change" }
        ],
        productionName: [
          { required: true, message: "请选择产品", trigger: "change" }
        ]
      }
    }
  },
  created() {
    this.getChannel();
  },

  methods: {
    getChannel() {
      findChannel().then(
        res => {
          console.log(res)
          this.channelOptions = res.data

        }
      ).catch(err => {
        console.log(err)
      })
    },

    jump(formName) {
      this.$refs[formName].validate((valid) => {  //开启校验
        if (valid) {   // 如果校验通过，请求接口，允许提交表单

          // 调用后台接口，操作数据库
          addNewFeedS1(this.queryParams).then(
            res => {
              console.log(res)
              //跳转路由,并传参             
              this.$router.push({
                path: '/customFeed/addNewFeed/step2',
                query: {
                  handle: 'add2',
                  baseParams: this.queryParams,
                  newFeedClientId:res.data.newFeedClientId,
                  newFeedLoanId:res.data.newFeedLoanId,

                  newFeedLoanNum:res.data.newFeedLoanNum,

                  newFeedProductName:res.data.newFeedProductName


                }   
              }) 
            }
          ).catch();


        } else {   //校验不通过
          return false;
        }
      });

    },
    //加载产品名称到下拉框候选数据中
    selectProduction(handle) {
      if (handle) {

        if (typeOf(this.queryParams.channelName) == "undefined" || this.queryParams.channelName === null || this.queryParams.channelName === '') {
          alert("请先选择渠道")
          return this.productionOptions = [];

        } else {
          findProduction(this.queryParams.channelName).then(
            res => {
              this.productionOptions = res.data
            }
          ).catch()
        }
      }

    }


  }
}


</script>

